<template>
	<div v-loading="copyState === 'unknown'" class="best-wrap">
		<!-- 复制列表页面 -->
		<div v-show="copyState === 'complete'" class="content-wrap">
			<!-- 项目树 -->
			<tree-project
				class="left-tree-project"
				menu-code="rc/courseware/copy-list"
				:only-avl-show="true"
				@choose="chooseProject"
				:default-checked="true"
			/>
			<!-- 列表内容 -->
			<div class="right-content">
				<div class="top-box">
					<!-- 筛选器 -->
					<filter-search
						:project-id="projectId"
						@load-start="searchLoading = true"
						@change="filtrateChange"
						@submit="filtrateSubmit"
					/>
					<!-- 按钮区域 -->
					<ve-operation>
						<div class="copy-hint">提醒：仅支持复制供应商为保利威且资源中心没有的vid课件至资源中心</div>
					</ve-operation>
				</div>
				<!-- 课件列表树 -->
				<div v-loading="searchLoading" class="tree-box">
					<el-tree
						ref="tree"
						node-key="id"
						:empty-text="treeEmptyText"
						:show-checkbox="true"
						:lazy="true"
						:data="treeData"
						:load="loadNode"
						:props="{
							children: 'children',
							label: 'name',
							isLeaf: 'leaf'
						}"
						@check="checkChange"
						v-slot="{ node }"
					>
						<el-popover
							class="popover-box"
							placement="top"
							trigger="hover"
							:disabled="node.label.length < 40"
							:content="node.label"
						>
							<div slot="reference" :class="['label-box', 'level' + node.level]">
								<img v-if="node.level === 3" class="play-ico" src="@rc/assets/images/play-ico.png">
								<span class="label-txt">{{ node.label }}</span>
							</div>
						</el-popover>
					</el-tree>
				</div>
				<!-- 浮动在底部的按钮 -->
				<div class="bottom-box">
					<el-button type="primary" @click="onClickCopy">开始复制</el-button>
					<span class="max-size-hint">
						已选择课件
						<span class="size">{{ checkedSize }}</span> 个，一次复制最多可选择500个课件
					</span>
				</div>
			</div>
		</div>
		<!-- 课件复制中页面 -->
		<div v-show="copyState === 'ing'" class="progress-wrap">
			<div class="con-box">
				<div class="hint-txt">
					<template v-if="copyTotalNumber === copyCompleteNumber">
						课件复制已完成，共
						<span class="size">{{ copyCompleteNumber }}</span> 条，成功
						<span class="size">{{ copySuccessNumber }}</span> 条，失败
						<span class="size">{{ copyFailNumber }}</span> 条，
					</template>
					<template v-else>
						课件正在复制中，请稍后
						<span class="loading-txt">.........</span>
					</template>
				</div>
				<el-progress :percentage="copyProgress" :stroke-width="15" color="#FF4436" />
				<el-button
					v-show="copyTotalNumber === copyCompleteNumber"
					class="mt-15"
					type="primary"
					@click="closeIngPage"
				>
					继续复制
				</el-button>
			</div>
		</div>
		<!-- 额外信息设置弹窗 -->
		<ve-dialog
			width="450px"
			title="设置系列课"
			:show.sync="isShowDialog"
			:show-close="true"
		>
			<el-form
				label-width="100px"
				label-suffix="："
				:model="dialogForm"
				ref="dialogForm"
			>
				<el-form-item
					label="系列课"
					prop="seriesCourseList"
					:rules="{ required: true, message: '请选择系列课', trigger: 'change' }"
				>
					<cascader-course
						ref="courseCascader"
						class="w-max"
						v-model="dialogForm.seriesCourseList"
						:project-id="projectId"
						:props-options="{multiple: true}"
					/>
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button :loading="submitLoading" @click="isShowDialog = false">取 消</el-button>
				<el-button type="primary" :loading="submitLoading" @click="onSubmitDialog">确 定</el-button>
			</template>
		</ve-dialog>
	</div>
</template>

<script src="./index.mjs"></script>
<style lang="less" scoped src="./index.less"></style>
